<!-- 批量报名 -->
<template>
  <div>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="手机号">
        <el-input
          v-model="search.phone"
          placeholder="请输入需要改变的手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addPhone" size="small"
          >新增</el-button
        >
      </el-form-item>
      <!-- <el-form-item label="商品id">
        <el-input v-model="search.goodsid" placeholder="请输入商品id" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="商品期次id">
        <el-input
          v-model="search.goodsArr"
          placeholder="请输入课程期次id#隔开"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changelessonId" size="small"
          >报名</el-button
        >
      </el-form-item>
      <!-- <el-form-item label="辅导老师">
            <nice-select v-model="search.status" placeholder="请选择辅导老师" clearable></nice-select>
          </el-form-item>
          <el-form-item label="科目">
            <nice-select v-model="search.status" placeholder="请选择科目" clearable></nice-select>
          </el-form-item>
          <el-form-item label="课程名称">
              <nice-select v-model="search.area" placeholder="请选择课程名称"  clearable></nice-select>
          </el-form-item>
          <el-form-item label="期次">
            <nice-select v-model="search.status" placeholder="请选择期次" clearable></nice-select>
      </el-form-item>-->
    </el-form>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>批量报名的手机号码(支持，隔开批量新增)</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >手机号个数：{{ phoneArr.length }}个</el-button
        >
      </div>

      <el-tag
        v-for="(tag, i) in phoneArr"
        :disable-transitions="true"
        @close="delPhone(i)"
        :key="i"
        closable
        style="margin-right:10px;margin-bottom:20px"
        >{{ tag }}</el-tag
      >
    </el-card>
  </div>
</template>

<script>
import { applyStudentCourse } from '@/api/tools.js'
export default {
  data () {
    return {
      search: {
        phone: '',
        faid: '',
        goodsArr: ''
      },
      phoneArr: []
    }
  },
  created () {},
  mounted () {},
  methods: {
    //   点击新增手机号
    addPhone () {
      let { phoneArr, search } = this
      let newArr = []
      for (let item of search.phone.split(',')) {
        if (item) {
          item = item
            .replace(/\ +/g, '')
            .replace(/[\r\n]/g, '')
            .replace(
              /[\ |\(|\)|\（|\）|\[|\]|\【|\】|\{|\}|\;|\；|\:|\：|\"|\“|\”|\‘|\’|\'|\.|\。|\,|\，|\《|\》|\?|\？|\！]/g,
              ''
            )
          newArr.push(item)
        }
      }
      this.phoneArr = [...phoneArr, ...newArr]
      this.search.phone = ''
    },
    // 点击删除手机号
    delPhone (index) {
      this.phoneArr.splice(index, 1)
    },
    // 点击增加课程的id
    changelessonId () {
      let { phone, goodsArr } = this.search
      this.addPhone()
      let param = {
        goodsArr: goodsArr,
        mobile: this.phoneArr.join(',')
      }
      applyStudentCourse(param).then(res => {
        this.phoneArr = []
        this.search = {
          phone: '',
          faid: '',
          goodsid: ''
        }
        this.$message({
          message: res[1].msg,
          type: 'success'
        })
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
